<template>
  <div class="transQuery_main">
    <h3>开通支付宝</h3>
   <div v-if="alipayData && alipayData.returnCode != '10000'" style="text-align: center;color: blue;">
    <span>审核结果：失败</span><br>
    <span>错误码：{{alipayData.errorCode}}</span><br>
    <span>失败描述：{{alipayData.resultMessage}}</span><br>
    </div>


      <a-form @submit="handleInput" :form="form" style="width:80%;margin:20px auto;">
        <a-form-item v-bind="formItemLayout" label="客户名称">
          <a-input
            placeholder="客户名称"
            v-decorator="[
                        'merchantName',
                        {rules: [{ required: true, message: '请填写客户名称' }]}
                      ]"
          />
        </a-form-item>

      <a-form-item v-bind="formItemLayout" label="客户简称">
        <a-input
           placeholder="客户简称"
          v-decorator="[
                        'shortName',
                        {rules: [{ required: true, message: '请填写客户简称' }]}
                      ]"
          />
        </a-form-item>

       <a-form-item v-bind="formItemLayout" label="商户类别">
                    <a-cascader  v-decorator="[
                      'mccName',
          {rules: [{ required: true, message: '请选择商户类别' }]}
                    ]" :options="mccoptions" @change="mccHandleChange" placeholder="请选择商户类别" />

                </a-form-item>

      <a-form-item v-bind="formItemLayout" label="联系人姓名">
        <a-input
           placeholder="联系人姓名"
          v-decorator="[
                        'contactName',
                        {rules: [{ required: true, message: '请填写联系人姓名' }]}
                      ]"
          />
        </a-form-item>
        <a-form-item :wrapperCol="{span:10,offset:7}">
          <a-button class="button_sty" :loading="loading" type="primary" html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>

    <h3>申请记录</h3>
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.transOrderNo"
    >
     <span slot="returnCode" slot-scope="record">
       {{record.returnCode=="10000"? "成功":"失败"}}
       </span>
    </a-table>
    <!-- <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />-->

    <a-modal style="top: 250px;" :visible="RelieveVisible" :footer="null"  :closable="false">
      <div class="modalClass">
        <span>已开通支付宝二维码功能</span>
        <span v-if="alipayData">商户识别码：{{alipayData.subMchId}}</span>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="handleOk">返回</a-button>
        </div>
      </div>
    </a-modal>
    
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "申请时间", dataIndex: "ctime", width: "20%", align: "center" },
  {
    title: "审核结果",
    scopedSlots: { customRender: "returnCode" },
    width: "20%",
    align: "center"
  },
  {
    title: "错误码",
    dataIndex: "errorCode",
    width: "20%",
    align: "center"
  },
  {
    title: "描述",
    dataIndex: "resultMessage",
    width: "20%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      form: this.$form.createForm(this),
      today: new Date(),
      columns,
      SNno: 0,
      querydata: {
        memberNo:null,
        merchantName:null,
        shortName:null,
        mcc:null,
        contactName:null
      },
      querylogs:{
        data:null,
        page:1,
        pageSize:10
      },
      mccoptions:[],
      pagination: { current: null, total: null },
      list: [],
      alipayData: null,
      RelieveVisible: false,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8, offset: 1 },
          md: { span: 8, offset: 1 }
        }
      }
    };
  },

  mounted() {
    this.getalipayData();
    this.getalipayList();
    this.getmccData();
    this.querydata.memberNo = this.$route.params.memberNo
    this.querylogs.data = this.$route.params.memberNo
  },
  methods: {
    moment,
    // onPageChange: function(page, pageSize) {
    //   console.info(page, pageSize);
    //   this.query.page = page;
    //   this.query.pageSize = pageSize;
    //   this.handleSearch();
    // },

    handleOk() {
      this.RelieveVisible = false;
      this.$router.push("/OrgRegister/orgAuditQuery")
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    handleInput(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(this.querydata)
          this.loading = true;
          this.querydata.merchantName = values.merchantName
          this.querydata.shortName = values.shortName
          this.querydata.contactName = values.contactName
          this.$axios
            .post("/agent/ali/pay/resubmit",this.querydata).then(res => {
                this.loading = false;
                if (res.data.code == "OK") {
                 this.$message.success("提交成功");
                 this.$router.push("/OrgRegister/orgAuditQuery")
                } else {
                  this.$message.error(res.data.message);
                  return false;
                }
              },
              err => {
                this.loading = false;
              }
            );
        }
      });
    },
    getalipayData() {
      this.$axios.get("/agent/ali/pay/fetch/"+this.$route.params.memberNo).then(res => {
        if (res.data.code == "OK") {
          this.alipayData = res.data.data
          if(this.alipayData && this.alipayData.returnCode == "10000"){
            this.RelieveVisible = true
          }
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      });
    },
    getalipayList() {
      this.$axios.post("/agent/ali/pay/fetch/logs",this.querylogs).then(res => {
        if (res.data.code == "OK") {
          this.list = res.data.list
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      });
    },
    mccHandleChange(value, selectedOptions) {
                console.log("typeChange", typeof value, value);
                console.log(selectedOptions);
                let arr = value;
   
                this.querydata.mcc = arr[1]
                console.log(this.querydata.mcc);
            },
    // 商户类别获取
            getmccData() {
                this.$axios.get("/agent/mcc/list").then(res => {
                    console.log("res", res);
                    // const result = res.data;
                    if (res.data.list) {
                        let list = res.data.list;
                        let arr = [];
                        let newArr = list.map((item, index, list) => {
                            let test = {
                                label: item.categoryName,
                                value: item.categoryName,
                                children: []
                            };
                            arr.push(test);
                            if (item.items) {
                                let children = [];

                                for (let i = 0; i < item.items.length; i++) {
                                    let test2 = {
                                        label: item.items[i].name,
                                        value: item.items[i].mcc
                                        // children: []
                                    };
                                    children.push(test2);
                                }
                                // console.log("children", children);
                                arr[index]["children"] = children;
                            }
                            return arr;
                        });
                        console.log("newArr", newArr);
                        this.mccoptions = newArr[0];
                        console.log("this.mccoptions", this.mccoptions);
                    } else {
                        console.log("res", res);
                    }
                });
            },
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.result {
  text-align: center;
  width: 72%;
  margin: 0 auto;
  margin-top: 120px;
  .success {
    color: #29a576;
  }
  .icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
  }
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
}


.button_sty {
  width: 140px;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 40px;
  margin-top: 150px;
}

.modalClass span {
  font-size: 17px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  // width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>